<template>
  <el-dialog
    v-model="showModel"
    class="dialog-form"
    title="选择图标"
    width="500px"
  >
    <div class="icon-div-container">
      <div
        v-for="(item, index) in iconList"
        :key="index"
        class="icon-div"
        @click="selectIcon(item)"
      >
        <span
          class="iconfont"
          :class="'icon-' + item"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showModel = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {WritableComputedRef} from "vue";
import iconList from "@/components/iconSelector/iconList";


const props = defineProps<{
  show: boolean
}>()
const emits = defineEmits<{
  (e: "update:show", value: boolean): void;
  (e: "select", value: string): void;
}>()

const showModel:WritableComputedRef<boolean> = computed({
  get() {
    return props.show
  },
  set(newValue) {
    emits("update:show", newValue)
  }
})

const selectIcon = (icon: string) => {
  emits("select", icon);
  showModel.value = false;
}

</script>

<style scoped lang="scss">
.icon-div-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

div.icon-div {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1px solid #47565d;
  margin: 10px;

  span {
    font-size: 30px;
  }
}
</style>
